<template>
    <div class="order_page">
        <head-top head-title="发布" go-back='true'></head-top>
        <form class="publish_form">
            <textarea placeholder="品牌型号，新旧程度，入手渠道..." v-model="gooddescription"> </textarea>
            <br>
            <section class="img_upload ">
                <aside class="photos container-fluid">
                    <div class="photo row">
                        <div class="img_upload_button ">
                            <img class="plus" src="../../images/plus.png">
                            <input type="file" id="uploadbutton" @change="imgPreview">
                        </div>
                    </div>

                </aside>
            </section>
            <ul class="otherinfo">
                <li><span class="cate">分类 ></span></li>
                <li><span class="price" contenteditable="true" v-model="price"></span></li>
            </ul>
            <button type="submit" @click="publishgoods">发布</button>
        </form>

        <foot-guide></foot-guide>
        <transition name="loading">
            <loading v-show="showLoading"></loading>
        </transition>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>

    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import headTop from 'src/components/header/head'
    import computeTime from 'src/components/common/computeTime'
    import loading from 'src/components/common/loading'
    import {getImgPath} from 'src/components/common/mixin'
    import footGuide from 'src/components/footer/footGuide'
    import {getOrderList, publishgood} from 'src/service/getData'
    import {loadMore} from 'src/components/common/mixin'
    import {imgBaseUrl} from 'src/config/env'
    import {getStore} from '../../config/mUtils'

    export default {
        data() {
            return {
                orderList: null, //订单列表
                offset: 0,
                preventRepeat: false,  //防止重复获取
                showLoading: true, //显示加载动画
                gooddescription: "",
                price: 0,
                imgList: [],
                imgsize: 0,
                imgData: {
                    accept: 'image/gif, image/jpeg, image/png, image/jpg',
                },
                formData: null,
                imgBaseUrl
            }
        },
        mounted() {
            this.initData();
        },
        mixins: [loadMore],
        components: {
            headTop,
            footGuide,
            loading,
            computeTime,
        },
        computed: {
            ...mapState([
                'userInfo', 'geohash'
            ]),
        },
        methods: {
            ...mapMutations([
                'SAVE_ORDER'
            ]),
            //初始化获取信息
            async initData() {
                let usertoken = getStore('user_token')
                if (!usertoken) {
                    this.$router.push('/login');
                }
                if (this.userInfo && this.userInfo.user_id) {
                    let res = await getOrderList(this.userInfo.user_id, this.offset);
                    this.orderList = [...res];
                    this.hideLoading();
                } else {

                    this.hideLoading();
                }
                this.imgList = [];
                this.imgpreview();

            },

            imgPreview(e) {
                console.log("aaa");
                if (this.imgsize > 3)
                    alert("只能添加三个图片");
                let inp = document.getElementById("uploadbutton");
                let img_upload_button = document.getElementsByClassName("img_upload_button")[0];
                let file = e.target.files[0];
                console.info(file);
                this.imgList.push(file);
                this.imgsize += 1;
                let url = window.URL.createObjectURL(file);
                let imgdiv = document.createElement("div")
                let img = document.createElement("img")
                imgdiv.append(img)
                let photo = document.getElementsByClassName("photo")
                img.setAttribute("src", url)
                let imgwidth = inp.offsetWidth
                imgdiv.setAttribute("width", imgwidth)
                imgdiv.setAttribute("height", imgwidth)
                imgdiv.setAttribute("class", "imgdiv")
                imgdiv.style.cssText += 'margin-right:10px;border-radius:9px;overflow:hidden;margin-bottom:10px;';
                img.setAttribute("width", imgwidth)
                img.setAttribute("height", imgwidth)
                photo[0].insertBefore(imgdiv, img_upload_button);

            },
            //加载更多
            async loaderMore() {
                if (this.preventRepeat) {
                    return
                }
                this.preventRepeat = true;
                this.showLoading = true;
                this.offset += 10;
                //获取信息
                let res = await getOrderList(this.userInfo.user_id, this.offset);
                this.orderList = [...this.orderList, ...res];
                this.hideLoading();
                if (res.length < 10) {
                    return
                }
                this.preventRepeat = false;
            },
            //显示详情页
            showDetail(item) {
                this.SAVE_ORDER(item);
                this.preventRepeat = false;
                this.$router.push('/order/orderDetail');
            },
            async publishgoods() {

                console.log(this.imgList);

                this.formData = new FormData();
                this.formData.append('goods_brief', this.gooddescription);
                console.log(this.gooddescription);
                this.formData.append('goods_price', this.price);
                let i;
                for (i = 0; i < this.imgList.length; i++) {
                    this.formData.append('images', this.imgList[i]);
                    console.log(this.imgList[i]);
                }
                this.formData.append('sellername',this.userInfo.username)
                console.log(this.userInfo.username)
                let res = await publishgood(this.formData);
            },
            //生产环境与发布环境隐藏loading方式不同
            hideLoading() {
                this.showLoading = false;
            },
        },
        watch: {
            // userInfo: function (value) {
            //   if (value && value.user_id && !this.orderList) {
            //     this.initData();
            //   }
            // }
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .publish_form {
        background-color: #f1f1f1;
        padding: 0.5rem;
        margin-top: 3em;

        textarea {
            padding: 30px 0 40px;
            min-height: 5em;
            background-color: #fff;
            width: 100%;
            word-wrap: break-word;
            word-break: break-all;
            overflow: auto;
        }

        .img_upload {
            display: flex;
            justify-content: space-between;
            padding: 30px 0 40px;

            .photos {
                //display: flex;
                word-wrap: break-word;
                word-break: break-all;
                overflow: auto;

                .photo {
                    //display: flex;
                    .img_upload_button {
                        display: inline-flex; /*设为内联块,为了看的清楚，下面注释改为双斜杠*/
                        position: relative; // 设置relative定为是为了配合下面的 position:absolute来实现img和input重合
                        width: 3.9em; // 确定整个区域大小-
                        height: 3.9em;
                        border: 0px solid #000000;
                        border-radius: 9px; //把矩形框设置为角为弧状的框
                        overflow: hidden; // 将子元素超过自己的部分隐藏
                        margin-left: 0px;
                        margin-right: 10px;
                        margin-bottom: 10px;

                        img {
                            position: absolute;
                            left: 0; // 在父元素的最左边
                            width: 3.9em;
                            height: 3.9em;
                        }

                        input {
                            left: 0;
                            float: left;
                            position: absolute;
                            width: 3.9em;
                            height: 3.9em;
                            background: #ff0000;
                            opacity: 0; // 设置此元素透明度，其中0为完全透明，1为完全不透明
                        }
                    }


                }

                photo:first-child {
                    margin-left: 0;
                }


            }
        }

        .otherinfo {
            display: block;
            li{

            }
            .price {
                display: block;
                background-color: #fff;
                width: 20%;
                margin: 0.2em 0em 0.2em 0em;
                border-radius: 0.2em;
            }

            .cate {
                color: grey;
                @include font(0.9rem, 0.9rem, 'PingFangSC-Regular');
            }
        }
    }
    button {
        margin-left: 12.3em;
    }
    .loading-enter-active, .loading-leave-active {
        transition: opacity .7s
    }

    .loading-enter, .loading-leave-active {
        opacity: 0
    }

    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }

    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
</style>
